<template>
    <div>
        <div class="content">
            <h2 class="remd_tl">推荐歌单</h2>
            <div class="remd_songs">
                <musicBox v-for="item in musicBoxList" :key="item.id" v-bind="item"></musicBox>
            </div>
            <h2 class="remd_tl">最新音乐</h2>
            <div  class="remd_newsg">
                <music v-for="(item,index) in newMusic" v-bind="item.song" :key="item.id" :index="index"></music>
            </div>
        </div>
        <div class="footer">
            <div class="positions">
                <div class="logo">
                    <logoChinese></logoChinese>
                </div>
                <div class="openapp">打开APP，发现更多好音乐 ></div>
                <p class="copyright">网易公司版权所有©1997-2018   杭州乐读科技有限公司运营</p>
            </div>
        </div>
    </div>
</template>

<script>
import musicBox from './music-box-T'
import music from './music-T'
import axios from 'axios'
import api from '@/api/index.js'
import logoChinese from '../svg/logoChinese.svg'
export default {
    components:{
        musicBox,
        music,
        logoChinese
    },
    data(){
        return {
            musicBoxList:[],
            newMusic:[]
        }
    },
    methods:{
        getMusicBoxData(){
            axios.get(api.personalized)
            .then((res)=>{
                this.musicBoxList=(res.data.result).splice(0,6);
                // console.log("musicBoxList:",this.musicBoxList);
            })
        },
        getNewMusic(){
            axios.get(api.newMusic)
            .then((res)=>{
                console.log(res)
                this.newMusic=res.data.result;
                console.log("newMusic:",this.newMusic);

            })
        }
        
    },
    mounted(){
        this.getMusicBoxData();
        this.getNewMusic();
    }
}

</script>
<style lang="scss" scoped>
.content{
    padding-top: 125px;
    background-color: #fcfcfd;
    
}
.remd_tl{
    position: relative;
    padding-left: 9px;
    margin-bottom: 14px;
    font-size: 17px;
    height: 20px;
    line-height: 20px;
    font-weight: 500;
}
.remd_tl::after{
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
    width: 2px;
    height: 16px;
    background-color: #d33a31;
}
.remd_songs{
    padding-bottom: 24px;
}
.logo{
    padding-top:16.9%; 
}
.footer{
    position: relative;
    padding-top: 53.3%;
    margin-top: 4px;
    background: url(//s3.music.126.net/m/s/img/recommand_bg_2x.png?d045faf…) no-repeat;
    background-size: contain;
}
.positions{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    text-align: center;
}
.logosvg{
    display: block;
    margin: 0 auto;
    width: 230px;
    height: 44px; 
}
.openapp{
    line-height: 38px;
    border: 1px solid #d33a31;
    border-radius: 38px;
    font-size: 16px;
    color: #d33a31;
    margin: 15px 37px 5px;
}
.copyright{
    color: #888;
    font-size: 12px;
    line-height: 16px;
    -webkit-transform: scale(.75);
    transform: scale(.75);
}
</style>
